<template>
    <div class="doctor-management">
      <!-- 搜索结果栏 -->
      <div class="search-container">
        <el-input
          v-model="searchName"
          placeholder="输入医生姓名搜索"
          clearable
          @clear="searchDoctors"
          style="width: 300px; margin-right: 10px"
        />
        <el-button type="primary" @click="searchDoctors">查询</el-button>
      </div>
  
      <!-- 医生表格 -->
      <el-table :data="doctorList" border style="width: 100%" v-loading="loading">
        <el-table-column prop="userId" label="用户ID" width="120" />
        <el-table-column prop="doctorName" label="姓名" width="150" />
        <el-table-column prop="licenseNumber" label="执业编号" />
        <el-table-column prop="specialty" label="专业" />
        <el-table-column prop="hospital" label="所属医院" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row.userId)"
              :loading="deleteLoading[row.userId]"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import { queryDoctorsByName, deleteUser } from '@/api/userManger';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import {jwtDecode} from 'jwt-decode'; // 修正后的导入方式
  
  export default {
    data() {
      return {
        searchName: '',
        doctorList: [],
        loading: false,
        deleteLoading: {} // 记录删除按钮的加载状态
      };
    },
  
    created() {
      this.fetchDoctors();
    },
  
    methods: {
      // 获取医生列表
      async fetchDoctors() {
        this.loading = true;
        try {
          const params = this.searchName ? { name: this.searchName } : null;
          const response = await queryDoctorsByName(params);
          this.doctorList = response.data || [];
        } catch (error) {
          ElMessage.error('获取医生列表失败');
        } finally {
          this.loading = false;
        }
      },
  
      // 搜索结果
      searchDoctors() {
        this.fetchDoctors();
      },
  
      // 删除医生
      async handleDelete(userId) {
        try {
          await ElMessageBox.confirm('确定要删除该医生吗？', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
  
          // 使用直接赋值来更新 deleteLoading 对象
          this.deleteLoading = { ...this.deleteLoading, [userId]: true };
  
          const token = localStorage.getItem('token');
          const { phone } = jwtDecode(token);
  
          await deleteUser({ userId, phone });
  
          ElMessage.success('删除成功');
          await this.fetchDoctors(); // 刷新列表
        } catch (error) {
          if (error !== 'cancel') {
            ElMessage.error('删除失败：' + (error.response?.data?.msg || error.message));
          }
        } finally {
          // 使用直接赋值来更新 deleteLoading 对象
          this.deleteLoading = { ...this.deleteLoading, [userId]: false };
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .doctor-management {
    padding: 20px;
  }
  
  .search-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
  }
  </style>